<template>
  <div>
    <el-dialog :title="formDialogTitle" :close-on-click-modal="false" :visible.sync="formDialogVisible" width="860px"
      append-to-body destroy-on-close @close="handleClose">
      <div class="card-container">
        <el-form ref="formDialog" :model="dialogForm" :rules="rules" label-width="180px" :disabled="formDisabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="dialogForm.name" maxlength="20" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类别" prop="category">
                <el-select v-model="dialogForm.category" size="small" placeholder="请选择" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_category" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="面积（平方米）" prop="acreage">
                <el-input placeholder="请输入面积（平方米）" maxlength="10" v-model="dialogForm.acreage">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="级别" prop="level">
                <el-select v-model="dialogForm.level" size="small" placeholder="请选择" style="width: 100%">
                  <el-option v-for="dict in dict.type.sys_level" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="有效面积（平方米）" prop="validArea">
                <el-input placeholder="请输入有效面积（平方米）" maxlength="10" v-model="dialogForm.validArea">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="容纳人数" prop="capacity">
                <el-input placeholder="请输入容纳人数" maxlength="10" v-model="dialogForm.capacity">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在地址" prop="addressList">
                <el-cascader @change="handleAddress" clearable filterable style="width: 100%"
                  v-model="dialogForm.addressList" :options="citylist" :props="{
                    expandTrigger: 'click',
                    label: 'name',
                    value: 'code',
                    children: 'child',
                  }"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="" prop="address" label-width="0" style="padding-left: 10px;">
                <el-input v-model="dialogForm.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="dialogForm.longitude" maxlength="20" placeholder="请输入经度" /> </el-form-item></el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="dialogForm.latitude" maxlength="20" placeholder="请输入纬度" /> </el-form-item></el-col>
          </el-row>
          <Map ref="map" @updateLocation="updateLocation" />
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button  @click="handleSubmit" v-if="flag != 'view'"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Map from "@/components/shelter/aliMap.vue";
import { getLnglat } from "@/api/earthquakeinfo/shelterManage";
import {
  addShelter,
  getShelterDetail,
  updateShelter,
} from "@/api/earthquakeinfo/shelterManage";
import mixin from "./mixin.js";
export default {
  name: "shelterFormDialog",
  components: {
    Map,
  },
  mixins: [mixin],
  dicts: ["sys_level", "sys_category"],
  data() {
    return {
      formDisabled: false,
      flag: "",
      formDialogVisible: false, // 弹框开关
      formDialogTitle: "", // 弹框标题
      // 表单参数
      dialogForm: {
        refugeId: "", // 主键id
        name: "", // 名称
        category: "", // 类别
        acreage: "", // 面积
        level: "", // 级别
        validArea: "", // 有效面积
        capacity: "", // 容纳人数
        addressList: [], // 省市区
        address: "", // 详细地址
        longitude: "", // 经度
        latitude: "", // 纬度
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        category: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        level: [
          { required: true, message: "请选择级别", trigger: "change" },
        ],
        addressList: [
          { required: true, message: "请选择地址", trigger: "change" },
        ],
        longitude: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        latitude: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 省市区联动变化后
    handleAddress(val) {
      console.log(val);
      if (val.length > 0) {
        this.dialogForm.address = "";
        let addressName = [];
        this.citylist.forEach((item1) => {
          if (item1.code == val[0]) {
            addressName.push(item1.name);
            item1.child.forEach((item2) => {
              if (item2.code == val[1]) {
                addressName.push(item2.name);
                item2.child.forEach((item3) => {
                  if (item3.code == val[2]) {
                    addressName.push(item3.name);
                  }
                });
              }
            });
          }
        });
        getLnglat({
          adCode: val[2],
          city: addressName[1],
          area: addressName[2],
        }).then((response) => {
          console.log("response.data", response.data);
          if (Object.keys(response.data).length > 0) {
            this.dialogForm.longitude = response.data.longitude;
            this.dialogForm.latitude = response.data.latitude;
            this.$refs.map.mapDraw(
              [this.dialogForm.longitude, this.dialogForm.latitude],
              this.dialogForm.address || ''
            );
          }
        });
      }
    },
    // 回显点击地图信息
    updateLocation(Addr) {
      if (this.flag == "add" || this.flag == "edit") {
        console.log("位置信息：", Addr);
        this.dialogForm.longitude = Addr.lon;
        this.dialogForm.latitude = Addr.lat;
        this.dialogForm.address = Addr.orgAddr;
        let addressCode = [];
        this.citylist.forEach((item1) => {
          if (item1.code.slice(0, 2) == Addr.adcode.slice(0, 2)) {
            addressCode.push(item1.code);
            item1.child.forEach((item2) => {
              if (item2.code.slice(2, 4) == Addr.adcode.slice(2, 4)) {
                addressCode.push(item2.code);
                item2.child.forEach((item3) => {
                  if (item3.code.slice(4, 6) == Addr.adcode.slice(4, 6)) {
                    addressCode.push(item3.code);
                  }
                });
              }
            });
          }
        });
        this.dialogForm.addressList = addressCode;
      }
    },
    // 显示弹框
    handleOpen(tempObj) {
      this.flag = tempObj.flag; // 操作类型    add 新增  edit 修改  view  查看  audit 审核
      this.formDialogVisible = true; // 显示弹框
      this.formDialogTitle = tempObj.title; // 弹框标题
      this.formDisabled = false; // form表单可编辑
      if (this.flag != "add") {
        this.dialogForm.refugeId = tempObj.rowdata.refugeId || ""; // 主键id
        getShelterDetail(tempObj.rowdata.refugeId).then((response) => {
          for (let key in this.dialogForm) {
            this.dialogForm[key] = response.data[key];
          }

          this.$refs.map.mapDraw(
            [this.dialogForm.longitude, this.dialogForm.latitude],
            this.dialogForm.address
          );
        });
        if (this.flag == "view" || this.flag == "audit") {
          this.formDisabled = true;
        }
      }
    },
    // 确定
    handleSubmit() {
      this.$refs["formDialog"].validate((valid) => {
        if (valid) {
          let postData = { ...this.dialogForm };
          delete postData.username;
          delete postData.password;
          if (this.dialogForm.refugeId) {
            updateShelter(postData).then((response) => {
              this.handleClose();
              this.$modal.msgSuccess("修改成功");
              this.$emit("searchList");
            });
          } else {
            addShelter(postData).then((response) => {
              this.handleClose();
              this.$modal.msgSuccess("新增成功");
              this.$emit("searchList");
            });
          }
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.$refs["formDialog"].resetFields();
      this.formDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
// ::v-deep .el-dialog__header {
//   padding: 20px;
//   padding-bottom: 10px;
//   border-bottom: 1px solid #ebebeb !important;
// }

// ::v-deep .el-input.is-disabled .el-input__inner {
//   color: #555 !important;
// }

// ::v-deep .el-textarea.is-disabled .el-textarea__inner {
//   color: #555 !important;
// }

// ::v-deep .el-radio__input.is-disabled+span.el-radio__label {
//   color: #555;
// }

.itemTitle {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}
</style>